<!doctype html>
<html>
    <head>
        <title>jsPlumb - dynamic anchors demonstration</title>
        <meta http-equiv="content-type" content="text/html;charset=utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no"/>
        <link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
        <link href="//fonts.googleapis.com/css?family=Lato:400,700" rel="stylesheet">

        <link rel="stylesheet" href="../../css/jsplumbtoolkit-defaults.css">
        <link rel="stylesheet" href="../../css/main.css">
        <link rel="stylesheet" href="../../css/jsplumbtoolkit-demo.css">
        <link rel="stylesheet" href="demo.css">
    </head>
    <body data-demo-id="dynamicAnchors">

        <a style="margin:10px 0 0 10px;display:inline-block" href="https://jsplumbtoolkit.com"><img src="../../img/logo-jsplumb-green.png"></a>

        <div class="jtk-demo-main">
			<!-- demo -->
            <div class="jtk-demo-canvas canvas-wide dynamic-demo jtk-surface jtk-surface-nopan" id="canvas">
                <div class="window" id="dynamicWindow1"><strong>1</strong><br/><br/></div>
                <div class="window" id="dynamicWindow2"><strong>2</strong><br/><br/></div>
                <div class="window" id="dynamicWindow3"><strong>3</strong><br/><br/></div>
                <div class="window" id="dynamicWindow4"><strong>4</strong><br/><br/></div>
                <div class="window" id="dynamicWindow5"><strong>5</strong><br/><br/></div>
                <div class="window" id="dynamicWindow6"><strong>6</strong><br/><br/></div>
            </div>
            <!-- /demo -->
            <!-- explanation -->
            <div class="description">
                <h4>DYNAMIC ANCHORS</h4>
                <p>This is a demonstration of anchors that change position dependent on the location of the other element in a connection. Each Connection is decorated with a Diamond overlay, located halfway along the connector.</p>
                <p>You can drag new connections between Endpoints.</p>
                <p>Endpoints support an unlimited number of Connections.</p>
            </div>
            <!-- /explanation -->
        </div>


        <!-- JS -->
        <script src="../../dist/js/jsplumb.js"></script>
        <!-- /JS -->

		<!--  demo code -->
		<script src="demo.js"></script>

        <script src="../demo-list.js"></script>

    </body>
</html>
